<template>
  <view>
    <view class="cardItem" v-for="(card, index) in workDataList" :key="card.prop" @click="toDetail">
      <view class="baseContent">
        <view class="workTitle">
          <span class="titleContent">
            <span class="spot"></span>{{card.title}}
          </span>
          <span class="dangerLevelTag"
            :class="card.dangerLevel === 'high' ? 'highDanger':'generalDanger'">{{card.dangerLevel === 'high' ? '高风险':'一般风险'}}</span>
        </view>
        <view class="rowItem" v-for="prop in baseInfoList" :key="prop.prop">
          <view class="label">{{ prop.label }}</view>
          <view class="value">
            {{ card[prop.prop] || '暂无数据' }}
            <!-- <span v-if="baseInfoData[base.prop]">{{ base.unit }}</span> -->
          </view>
        </view>
        <!-- <slot></slot> -->
        <!--  -->
        <view class="rowItem">
          <view class="label">审批意见</view>
          <view class="value">
            <!-- <u--textarea placeholder="请输入审批意见" :value="card.handleRemark" height="100" :key="'textarea' + index+1"
              @input="(e)=>textareaInput(e, index)"></u--textarea> -->
            仅已审核展示审批意见
          </view>
        </view>
      </view>
      <!-- <slot :name="`card-footer${index}`"></slot> -->
      <view class="auditBtnContent">
        <view class="examineBtn" @click.stop="examineOpen(JSON.stringify(card))">驳回</view>
        <view class="submitBtn" @click.stop="toAgree(JSON.stringify(card))">同意</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    baseInfoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    dataList: {
      handler: function (val) {
        console.log(val, 'val')
        this.workDataList = val.length ? val.map(item => {
          return {
            ...item,
            handleRemark: item.handleRemark || ""
          }
        }) : []

      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      workDataList: []
    }
  },
  methods: {
    toDetail() {
      this.$tab.navigateTo('/subpack_Manage/workAudit/detail')
    },
    examineOpen(cardData) {
      uni.$emit('examineOpen', { ...JSON.parse(cardData), examineDialog: true })
    },
    // 手动实现双向绑定
    textareaInput(e, index) {
      // console.log(e, index, this.workDataList, '文本框输入')
      this.$set(this.workDataList[index], 'handleRemark', e)
    },
    // 审核通过
    toAgree(work) {
      const { id, handleRemark } = JSON.parse(work)
      console.log(id, handleRemark, 'handleRemark')
      this.$modal.confirm('确认同意？', '提示').then(res => {
        // TODO--调用审核通过接口
        console.log('确认审批通过！', id, handleRemark, res)
      })
    },
  }
}
</script>

<style lang="scss">
.baseContent {
  padding: 32rpx;
}
.cardItem {
  background: #fff;
  border-radius: 6rpx;
  color: #000;
  margin: 32rpx;
  .workTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 42rpx;
    .titleContent {
      flex: 1;
      white-space: wrap;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 28rpx;
      color: #4a4a4a;
      text-align: left;
    }
    .spot {
      display: inline-block;
      width: 8rpx;
      height: 20rpx;
      background: #2769f7;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      opacity: 0.6;
      margin-right: 8rpx;
    }
    .dangerLevelTag {
      display: inline-block;
      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 20rpx;
      line-height: 40rpx;
      white-space: nowrap;
      padding: 6rpx 19rpx;
      border-radius: 6rpx;
    }
    .highDanger {
      color: #ff0200;
      background: #ffebef;
    }
    .generalDanger {
      color: #fc8382;
      background: #ffebef;
    }
  }
  .rowItem {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    line-height: 40rpx;
    margin-bottom: 16rpx;
    .label {
      color: #989898;
      font-weight: bold;
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .value {
      width: calc(100% - 180rpx);
      text-align: left;
      font-size: 24rpx;
      color: #4a4a4a;
    }
  }
  .auditBtnContent {
    height: 76rpx;
    width: 100%;
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    .examineBtn {
      flex: 1;
      text-align: center;
      line-height: 76rpx;
      background: #e6eeff;
      color: #2769f7;
      border-radius: 0rpx 0rpx 0rpx 10rpx;
    }
    .submitBtn {
      flex: 1;
      text-align: center;
      line-height: 76rpx;
      background: #2769f7;
      color: #fff;
      border-radius: 0rpx 0rpx 10rpx 0rpx;
    }
  }
}
</style>